<template>
<!-- 首页 -->
  <div class="hello">
    <div class="banner">
    <mt-swipe :auto="4000">
      <mt-swipe-item v-for = "(item,index) in bannerlist" :key="index">
        <img :src="item.img" >
      </mt-swipe-item>
    </mt-swipe>
    </div>
     <div class="list">
       <ul class="mui-table-view mui-grid-view mui-grid-9">
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
              <router-link to="/hone/journalism">
                    <img src="../../images/menu1(1).png" alt="">
                    <div class="mui-media-body">新闻资讯</div></router-link></li>    
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
                    <router-link to="/hone/sharing" ><img src="../../images/menu2.png" alt="">
                    <div class="mui-media-body">图片浏览</div></router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
              <router-link to="/goodsList">
                   <img src="../../images/menu3.png" alt="">
                    <div class="mui-media-body">商品购买</div></router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
                <img src="../../images/menu4.png" alt="">
                    <div class="mui-media-body">留言专区</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
                   <img src="../../images/menu5.png" alt="">
                    <div class="mui-media-body">视屏专区</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
                   <img src="../../images/menu6.png" alt="">
                  <div class="mui-media-body">联系我们</div></a></li>
       </ul> 
     </div>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
import { getnaber } from "@/api/index.js";

export default {
  name: 'HelloWorld',
  data () {
    return {
       bannerlist:[],
    }
  },
   created () {
      this.banner()
    },
  methods:{
    banner(){
      getnaber().then(res =>{
        console.log(res)
         if (res.status === 0) {
          this.bannerlist = res.message;
        } else {
          Toast("加载轮播图失败。。。");
        }
      })
    }
   
  }
}
</script>


<style scoped lang="scss">
.banner{
  width: 100%;
  height: 200px;
}
img{
  width: 100%;
  height: 100%;
}
.mui-grid-view .mui-grid-9 {
  background-color: #fff;
  border: none;
  padding-top: 0;
}
.mui-grid-view.mui-grid-9 .mui-table-view-cell {
  border: none;
  background-color: #fff;
  img {
    width: 60px;
    height: 60px;
  }
  .mui-media-body {
    font-size: 13px;
  }
}
</style>
